<!DOCTYPE html>
<html lang="en">

	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>仓位库存报表</title>

		<meta name="description" content="Dynamic tables and grids using jqGrid plugin" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="../assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="../assets/font-awesome/4.5.0/css/font-awesome.min.css" />

		<!-- page specific plugin styles -->
		<link rel="stylesheet" href="../assets/css/jquery-ui.min.css" />
		<link rel="stylesheet" href="../assets/css/bootstrap-datepicker3.min.css" />
		<link rel="stylesheet" href="../assets/css/ui.jqgrid.min.css" />

		<!-- text fonts -->
		<link rel="stylesheet" href="../assets/css/fonts.googleapis.com.css" />

		<!-- ace styles -->
		<link rel="stylesheet" href="../assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />

		<link rel="stylesheet" href="../assets/css/ace-skins.min.css" />
		<link rel="stylesheet" href="../assets/css/ace-rtl.min.css" />

		<script src="../assets/js/ace-extra.min.js"></script>
	</head>

	<body class="no-skin">

		<div class="main-container ace-save-state" id="main-container">
			<script type="text/javascript">
				try {
					ace.settings.loadState('main-container')
				} catch(e) {}
			</script>
			<table id="tab" style="margin-top:-1px;">
				<tr>
					<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="ace-icon fa  blue">应用分类：</i></td>
					<td>
						<select id="Meta_App" onchange="AppOnclick()">
						</select>
						<td>&nbsp;</td>
					</td>
					<td>&nbsp;&nbsp;&nbsp;<i class="ace-icon fa  blue">店铺分类:</i></td>
					<td>
						<select id="Meta_Store" onchange="StoreOnclick()">
						</select>
					</td>
					<td>&nbsp;&nbsp;&nbsp;<i class="ace-icon fa  blue">智能机仓:</i></td>
					<td>
						<select id="Meta_Cab" onchange="CabOnclick()">
						</select>
					</td>
					<td>&nbsp;&nbsp;&nbsp;<button class="btn btn-sm btn-primary" onClick="OutExcel()">导出EXCEL</button></td>

				</tr>
			</table>

			<div class="main-content">
				<div class="main-content-inner">
					<div class="page-content">
						<div class="row">
							<div class="col-xs-12">
								<table id="grid-table"></table>
								<div id="grid-pager"></div>
								<table id="grid-total" style="margin-top:-1px;" class="control-label bolder blue" width=80%>
									<tr>
										<td>&nbsp;&nbsp;<i class="ace-icon fa  blue">总计：</i></td>
										<td><i class="ace-icon fa  blue">在库库位数</i></td>
										<td><input id="stockTotal" type="text" readonly="readonly"></input>
										</td>
										<td><i class="ace-icon fa  blue">可用库存数</i></td>
										<td><input id="avaliableTotal" type="text" readonly="readonly"></input>
										</td>
										<td><i class="ace-icon fa  blue">锁定库存数</i></td>
										<td><input id="lockingTotal" type="text" readonly="readonly"></input>
										</td>
									</tr>
								</table>

							</div>
						</div>
					</div>
				</div>
			</div>

			<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
				<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
			</a>
		</div>
		<script src="../assets/js/jquery-2.1.4.min.js"></script>
		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='../assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
		</script>
		<script src="../assets/js/bootstrap.min.js"></script>
		<script src="../assets/js/bootstrap-datepicker.min.js"></script>
		<script src="../assets/js/jquery.jqGrid.min.js"></script>
		<script src="../assets/js/grid.locale-en.js"></script>
		<script src="../assets/js/ace-elements.min.js"></script>
		<script src="../assets/js/ace.min.js"></script>
		<script src="../assets/js/a-my-common.js"></script>

		<script type="text/javascript">
			var TablesName = "ChtStock";
			//获取总计
			var skua = [];
			var skub = [];
			var skuc = [];
			$.ajax({
				url: URL_TABLES+"/rapi?operFlag=queryReportAmount&Mate_TablesName=" + TablesName,
				type: "post",
				async: true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
				data: {},
				dataType: "json",
				success: function(result) {
					if(result) {
						var datas = result.root;
						skua.push(datas[0].stockTotal);
						skub.push(datas[0].avaliableTotal);
						skuc.push(datas[0].lockingTotal);
						document.getElementById("stockTotal").value = skua;
						document.getElementById("avaliableTotal").value = skub;
						document.getElementById("lockingTotal").value = skuc;
					} else {
						alert("请重新键入！");
					}
				},

			});

			$(function() {
				getChooseAPP();
				getChooseStore();
				getChooseCab();
				getSkuList();
			})

			var cht_appsId = "";
			var Meta_storeId = "";
			var Meta_code = "";

			function AppOnclick() {
				cht_appsId = $('#Meta_App').val();
				getChooseStore();
				getSkuList();
			}

			function StoreOnclick() {
				Meta_storeId = $('#Meta_Store').val();
				getChooseCab();
				getSkuList();
			}

			function CabOnclick() {
				Meta_code = $('#Meta_Cab').val();
				getSkuList();
			}

			//加载应用分类信息
			function getChooseAPP() {
				var data = {
					operFlag: "chooseAPP"
				}
				var rtAry = myPost(URL_TABLES+"/rapi", data);
				var str = "";
				var main = "<option value =''>全部分类</option>";
				for(var i = 0; i < rtAry.length; i++) {
					str += '<option value = ' + rtAry[i].cht_appsId + '>' + rtAry[i].Meta_name + '</option>';
				}
				//把拼接好的str放到select标签里
				Meta_App.innerHTML = main + str;
			}

			//加载店铺信息
			function getChooseStore() {
				var data = {
					operFlag: "chooseStore",
					cht_appsId: cht_appsId

				}
				var rtAry = myPost(URL_TABLES+"/rapi", data);
				var str = "";
				var main = "<option value =''>全部店铺</option>";
				for(var i = 0; i < rtAry.length; i++) {
					str += '<option value = ' + rtAry[i].cht_storeId + '>' + rtAry[i].Meta_name + '</option>';
				}
				//把拼接好的str放到select标签里
				Meta_Store.innerHTML = main + str;
			}

			//加载智能仓信息
			function getChooseCab() {
				var data = {
					operFlag: "chooseCab",
					Meta_storeId: Meta_storeId
				}
				var rtAry = myPost(URL_TABLES+"/rapi", data);
				var str = "";
				var main = "<option value =''>全部机仓</option>";
				for(var i = 0; i < rtAry.length; i++) {
					str += '<option value = ' + rtAry[i].Meta_code + '>' + rtAry[i].Meta_name + '</option>';
				}
				//把拼接好的str放到select标签里
				Meta_Cab.innerHTML = main + str;
			}

			function myPost(url, data) {
				var recordAry = null;
				$.ajax({
					type: 'post',
					url: url,
					data: data,
					dataType: 'json',
					async: false,
					success: function(returnValue) {
						recordAry = returnValue;
					},
					error: function(XMLHttpRequest, textStatus, errorThrown) {
						var errorInfo = "status:" + XMLHttpRequest.status;
						errorInfo += ",readyState:" + XMLHttpRequest.readyState;
						console.log("槽糕!请求服务器端发生异常{post>error![errorInfo=" + errorInfo + "]}");
					}
				});
				return recordAry;
			}

			function OutExcel() {
				
				window.location = URL_TABLES+"/bapi?operFlag=getReport&Meta_code=" + Meta_code + "&Meta_storeId=" + Meta_storeId + "&cht_appsId=" + cht_appsId + "&Mate_TablesName=" + TablesName;
			}

			function getSkuList() {
				jQuery(function($) {
					var grid_selector = "#grid-table";
					var pager_selector = "#grid-pager";

					var parent_column = $(grid_selector).closest('[class*="col-"]');
					//resize to fit page size
					$(window).on('resize.jqGrid', function() {
						$(grid_selector).jqGrid('setGridWidth', parent_column.width());
					})

					//	jQuery(grid_selector).trigger("reloadGrid");

					jQuery(grid_selector).setGridParam( //G,P要大写
						{
							url: URL_TABLES+"/rapi?operFlag=queryReport&Meta_code=" + Meta_code + "&Meta_storeId=" + Meta_storeId + "&cht_appsId=" + cht_appsId+ "&Mate_TablesName=" + TablesName,
							postData: {
								"Meta_code": Meta_code
							},
							postData: {
								"Meta_storeId": Meta_storeId
							},
							postData: {
								"cht_appsId": cht_appsId
							},
							postData: {
								"Mate_TablesName": TablesName
							},
						}
					).trigger("reloadGrid");
					jQuery(grid_selector).jqGrid({
						url: URL_TABLES+"/rapi?operFlag=queryReport&Meta_code=" + Meta_code + "&Meta_storeId=" + Meta_storeId + "&cht_appsId=" + cht_appsId+ "&Mate_TablesName=" + TablesName,
						datatype: "json",
						pager: pager_selector,
						pgtext: "第{0}页   共{1}页",
						recordtext: " 显示 {0} -{1} 条纪录，  共 {2}条记录",
						emptyrecords: "当前没有对应记录信息",
						loadtext: "加载中...",
						height: 250,
						colNames: ['店铺编号', '店铺名称', '仓编号', '仓名称', '库位数', '锁定库位数', '在库库存数', '锁定库存数', '可用库位数'],
						colModel: [{
								name: 'Meta_store_No',
								index: 'Meta_store_No',
								width: 110
							},
							{
								name: 'Meta_store_Name',
								index: 'Meta_store_Name',
								width: 110
							},
							{
								name: 'META_CODE',
								index: 'META_CODE',
								width: 100
							},
							{
								name: 'META_CABINET_CAB_NAME',
								index: 'META_CABINET_CAB_NAME',
								width: 100
							},
							{
								name: 'Meta_capacity',
								index: 'Meta_capacity',
								width: 100
							},
							{
								name: 'lockCount',
								index: 'lockCount',
								width: 100
							},
							{
								name: 'META_STOCK',
								index: 'META_STOCK',
								width: 100,
								editable: false,
								edittype: false
							},
							{
								name: 'Meta_avaliable_Stock',
								index: 'Meta_avaliable_Stock',
								width: 100,
								editable: false,
								edittype: "textarea"
							},
							{
								name: 'Meta_locking_Stock',
								index: 'Meta_locking_Stock',
								width: 100,
								editable: false,
								edittype: "select"
							},

						],

						jsonReader: { //jsonReader来跟服务器端返回的数据做对应  
							root: "root", //包含实际数据的数组  
							page: "page", //当前页  
							totalPage: "totalPage", //总页数  
							totalRecords: "totalRecord", //查询出的记录数  
							repeatitems: false
						},

						viewrecords: true,
						rowNum: 10,
						rowList: [10, 20, 30],
						pager: pager_selector,
						altRows: true,
						multiboxonly: true,
						// 数据加载完成后 添加 采购按钮 
						loadComplete: function() {
							var table = this;
							setTimeout(function() {
								styleCheckbox(table);
								updateActionIcons(table);
								updatePagerIcons(table);
								enableTooltips(table);
							}, 0);
						},

						caption: "",
					});

				//设置高度
					$(grid_selector).setGridHeight('323');

					$(window).triggerHandler('resize.jqGrid'); //trigger window resize to make the grid get the correct size
					//navButtons
					jQuery(grid_selector).jqGrid('navGrid', pager_selector, { //navbar options
						edit: false,
						editicon: 'ace-icon fa fa-pencil blue',
						add: false,
						addicon: 'ace-icon fa fa-plus-circle purple',
						del: false,
						delicon: 'ace-icon fa fa-trash-o red',
						search: false,
						searchicon: 'ace-icon fa fa-search orange',
						refresh: true,
						refreshicon: 'ace-icon fa fa-refresh green',
						view: true,
						viewicon: 'ace-icon fa fa-search-plus grey',
					}, {
						//view record form
						recreateForm: true,
						beforeShowForm: function(e) {
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
						}
					})

					//or go back to default browser checkbox styles for the grid
					function styleCheckbox(table) {}
					//you can change them like this in here if you want
					function updateActionIcons(table) {}

					//replace icons with FontAwesome icons like above
					function updatePagerIcons(table) {
						var replacement = {
							'ui-icon-seek-first': 'ace-icon fa fa-angle-double-left bigger-140',
							'ui-icon-seek-prev': 'ace-icon fa fa-angle-left bigger-140',
							'ui-icon-seek-next': 'ace-icon fa fa-angle-right bigger-140',
							'ui-icon-seek-end': 'ace-icon fa fa-angle-double-right bigger-140'
						};
						$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function() {
							var icon = $(this);
							var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

							if($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
						})
					}

					function enableTooltips(table) {
						$('.navtable .ui-pg-button').tooltip({
							container: 'body'
						});
						$(table).find('.ui-pg-div').tooltip({
							container: 'body'
						});
					}

					//var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');

					$(document).one('ajaxloadstart.page', function(e) {
						$.jgrid.gridDestroy(grid_selector);
						$('.ui-jqdialog').remove();
					});
				});
			}
		</script>
	</body>

</html>